<template>
  <div class="job">
      <div class="jobFairList" v-for="(item,index) in 5" :key="index">
        <div>
            <h1 class="jobFair_name">就业扶贫攻坚专场招聘会</h1>
            <div class="jobFair_info">
                <div>
                    <p class="jobFair_Holding">
                        <span><i class="el-icon-time" style="color:rgba(24,147,252,1);margin-right:5px;font-size:16px;"></i>举办时间：2019.08.31</span>
                        <span><i class="el-icon-phone" style="color:rgba(24,147,252,1);margin-right:5px;font-size:16px;"></i>联系电话：8888888888</span>
                    </p>
                </div>
            </div>
            <p class="jobFair_SponsorUnit">
                <span>主办单位：人力资源和社会保障局</span>
                <span>承办单位：人力资源和社会保障局</span>
            </p>
        </div>
        <div class="jobFair_btnSee">
            <!-- 攻击7个状态  :class="statusText[item.status][0]"-->
            <el-button type="primary" :class="statusText[index][0]" @click="viewResume(index)">{{statusText[index][1]}}</el-button>
            <el-button type="primary" :class="statusText[index+1][0]" @click="viewResume(index)">{{statusText[index+1][1]}}</el-button>
        </div>
        <span class="jobFair_roofPlacement" v-if="index%2==0">
            <img src="../../../assets/img/zhiding.png" alt="">
        </span>
      </div>
      <div class="pagination" style="text-align: center;margin-top: 30px;">
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="currentChange"
            :total="1000">
        </el-pagination>
      </div>
  </div>
</template>

<script>
export default {
    name: 'jobfair',
    data () {
        return {
            // 对应不同状态 显示不同按钮 以及颜色
            statusText: {
                0: ['span-onlineBooking', '在线预订'],
                1: ['span-booked', '已预约'],
                2: ['span-participating ', '参会职位'],
                3: ['span-hasEnded ', '已结束'],
                4: ['span-appointmentpassed', '预约已通过'],
                5: ['span-notPass', '未通过']
            }
        }
    },
    methods: {
        // 点进去 查看列表详情
        viewResume (val) {
            if (val/2 == 0) {
                this.$router.push({
                    path: '/jobFairBooking'
                })
            } else {
                this.$router.push({
                    path: '/modifyInformation'
                })
            }
          
            
        },
        currentChange (val) {
            console.log(val, 'currentChange 请求')
        }
    }
}
</script>

<style scoped>
.job{
    background:rgba(246,246,248,1);
}
.jobFairList {
    width: 1104px;
    height: 96px;
    margin: 16px auto 0 auto;
    background: #ffffff;
    opacity: 1;
    justify-content: space-between;
    align-items: center;
    padding: 22px 48px;
    display: flex;
    position: relative;
 }
 /* 置顶 */
 .jobFair_roofPlacement {
     width: 58px;
     height: 58px;
     position: absolute;
     right: 0;
     top:0;
     display: inline-block;
     /* background: red; */
     /* opacity: .3; */
 }
 .jobFair_name{
     font-size: 20px;
     color: #222222;
     line-height: 25px;
     position: relative;
     text-indent: 10px;
 }
 .jobFair_name:after{
    position: absolute;
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    left: 0;
    top: 4px;
    background: #0093FF;
 }
 .jobFair_info{
     display: flex;
     justify-content: space-between;
     line-height: 45px;
 }
 .jobFair_Holding{
    height:20px;
    font-size:14px;
    display: inline-block;
    font-family:PingFang SC;
    font-weight:400;
    line-height:16px;
    color:rgba(85,85,85,1);
    opacity:1;
 }
 .jobFair_Holding span:nth-child(1) {
     margin-right: 33px;
 }

  .jobFair_btnSee /deep/ .el-button {
    width:216px;
    height:46px;
    display: block;
    margin-top:5px;
    margin-left: 10px;
  }
   .jobFair_btnSee /deep/ .el-button span{
    opacity:1;
    text-align: center;
    font-size:16px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
   }
 .jobFair_SponsorUnit{
    display: inline-block;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:30px;
    color:rgba(85,85,85,1);
    opacity:1;
 }
.jobFair_SponsorUnit span:nth-child(1) {
     margin-right: 33px;
 }
  .jobFair_btnSee /deep/ .span-booked{
     background:rgba(177,222,255,1);
 }
  .jobFair_btnSee /deep/ .span-hasEnded{
     background:rgba(204,204,204,1);
 }
  .jobFair_btnSee /deep/ .span-appointmentpassed{
     background:rgba(0,155,62,1)
 }
  .jobFair_btnSee /deep/ .span-notPass{
     background:rgba(253,78,64,1);
 }
 .jobFair_btnSee /deep/ .el-button--primary {
     border-color: rgb(0,0,0,0);
 }
 .pagination /deep/ .el-pagination.is-background .el-pager li{
     background-color: #fff;
     border:1px solid rgba(204,204,204,1);
 }
 .pagination /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1893FC; 
  color: #fff;
}
</style>